<template>
  <div>
    <div class="good-table-wrap">
      <table class="good-table">
        <tr class="good-row">
          <th class="flex-3">商品标题</th>
          <th class="flex-2">规格、编号、条码</th>
          <th class="flex-1">单价</th>
          <th class="flex-1">数量</th>
          <th class="flex-1">原价</th>
          <th class="flex-1">折扣后</th>
          <th class="flex-1">状态</th>
        </tr>
        <tr class="tr-item">
          <td class="td-border align-items-center justify-content-around flex-3 td-box">
            <img src="" alt="" width="50" height="50" />
            <span>测试商品套餐</span>
          </td>
          <td class="d-flex flex-column td-border flex-2 td-box">
            <span>规格:无</span>
            <span>编码:无</span>
            <span>条码:无</span>
          </td>
          <td class="td-border flex-1">￥0.20</td>
          <td class="td-border flex-1">1个</td>
          <td class="td-border flex-1">￥0.10</td>
          <td class="td-border flex-1">￥0.10</td>
          <td class="flex-1">已付款</td>
        </tr>
        <div class="d-flex flex-column float-right sum-box">
          <div>商品小计<span style="color: #726b66">￥0.10</span></div>
          <div>运费<span style="color: #8f6f73">￥0.00</span></div>
          <div>实付款<span style="color: red">￥0.10</span></div>
        </div>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Com-GoodTableShow',
  data() {
    return {}
  },
  methods: {},
  mounted() {},
}
</script>

<style lang="scss" scoped>
.good-title {
  color: #000;
  font-size: 24px;
}
.good-table {
  width: 100%;
}
.good-table .tr-item {
  width: 100%;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
}
.good-table-wrap {
  width: 100%;
  border: 1px solid #f0f0f0;
}
.float-right {
  float: right;
}
.sum-box {
  line-height: 2;
  padding: 10px 20px 10px 0;
}
.p-15 {
  padding-left: 15px;
}
.order-status-layout .left-box {
  padding: 15px 10px 15px 10px;
  border-right: 1px solid #f0f0f0;
  width: 50%;
}
.td-border {
  border-right: 1px solid #f0f0f0;
}
.good-row {
  border-bottom: 1px solid #f0f0f0;
  display: flex;
}
.flex-3 {
  flex: 0.2;
  display: flex;
}
.flex-2 {
  flex: 0.2;
  display: flex;
}
.flex-1 {
  flex: 0.15;
  display: flex;
  align-items: center;
  justify-content: center;
}
.good-row th {
  text-align: center;
  font-weight: normal;
  padding: 10px 0 10px 30px;
}
.td-box {
  padding: 10px 0 10px 15px;
}
.order-status-layout .right-box {
  padding: 15px 20px 15px 20px;
  width: 50%;
}
</style>
